import React from 'react';
import styles from './myWallet.css';
import BillList from './billList/billList';
import fmoney from '../../../../../../framework/utils/fmoney';

const myWallet = ({
  onSelected=()=>{},
  onbillNav=()=>{},
  onCash=()=>{},
  selectedIndex=0,
  billNavIndex=0,
  myBalanceInfo={},
  incomeDetailList=[],
  payDetailList=[],
}) => {

  // console.log('myBalanceInfo', myBalanceInfo);
  // console.log('payDetailList', payDetailList);

  const WalletData = [
    {
      title: '',
      balance: myBalanceInfo,
      incomes: incomeDetailList,
      expends: payDetailList,
    },
    // {
    //   title: '我的积分',
    //   balance: 120,
    //   incomes: [
    //     {
    //       title: '兼职工资',
    //       number: 30,
    //       date: '2017-03-02'
    //     },{
    //       title: '兼职工资',
    //       number: 32,
    //       date: '2017-03-04'
    //     },{
    //       title: '兼职工资',
    //       number: 33,
    //       date: '2017-03-05'
    //     }
    //   ],
    //   expends: [
    //     {
    //       title: '兑换礼物',
    //       money: 80,
    //       date: '2013-03-02'
    //     },{
    //       title: '购物',
    //       money: 82,
    //       date: '2015-03-04'
    //     },{
    //       title: '兑换礼物',
    //       money: 83,
    //       date: '2016-03-05'
    //     }
    //   ]
    // }
  ]

  const dataList = billNavIndex==0?WalletData[selectedIndex].incomes:WalletData[selectedIndex].expends

  const billItemProps = {
    list:dataList
  }

  return(
    <div className={styles.container}>
      <div className={styles.tabsNavBody}>
        {WalletData.map((item,index) =>{
          let itemClass = [`${styles.tabItem}`,`${styles.textColor}`];
          if(selectedIndex == index){
            itemClass.length = 0;
            itemClass.push(`${styles.tabItem}`)
            itemClass.push(`${styles.textColorSelected}`)
          }
          return (
            <div key={index.toString()}
              className={itemClass.join(' ')}
              onClick={() => onSelected(index)}>
              <span>{item.title}</span>
            </div>
          )
        })}
      </div>

      <div className={styles.content}>
        <div className={styles.topView}>
          { selectedIndex==0 ? (
            <div className={styles.titleLink}>当前余额(元)</div>
          ):(<div className={styles.titleLink}>当前积分</div>)}
          <div className={styles.balance}>
            {fmoney(WalletData[selectedIndex].balance, 2)}
          </div>
          { selectedIndex==0 ? (
            <div className={styles.kiting} onClick={() => onCash()}>提现</div>
          ):''}
        </div>
        <div className={styles.bill}>
          <div className={styles.billNav}>
            <div className={billNavIndex==0? styles.billNavItemSel: styles.billNavItem} onClick={() => onbillNav(0)}>收入明细 </div>
            <div className={billNavIndex==1? styles.billNavItemSel: styles.billNavItem} onClick={() => onbillNav(1)}>支出明细 </div>
          </div>
          <div className={styles.billList}>
            {/* { Arr.map((item,index) => {
              return(
                <div key={index.toString()} className={styles.billItem} >
                  <div className={styles.billItemLeft}>
                    <div className={styles.billItemTitle}>
                      {item.changeNote}
                    </div>
                    <div className={styles.billItemDate}>
                      {item.changedDate}
                    </div>
                  </div>
                  <div className={styles.billItemRight}>
                    {Fmoney(item.balance,2)}
                  </div>
                </div>
              )
            })} */}
            <BillList {...billItemProps}/>

          </div>
        </div>
      </div>
    </div>
  )
}

export default myWallet;
